<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>

<body>
    <a href="https://www.runoob.com/ajax/ajax-json.html">参考代码</a>
    <a href="https://www.baidu.com"><img src="baidu.png" alt="百度地址" width="400px" height="100px"></a>
    <hr>
    <form action="https://d21d-183-167-205-82.ngrok-free.app/login" method="post"
        enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" id="username" placeholder="请输入用户名" required>
        <br>
        <input type="password" name="password" id="password" placeholder="请输入密码" required>
        <br>
        <input type="text" name="stuId" id="stuID" placeholder="请输入学号">
        <br>
        <input type="text" name="name" id="name" placeholder="请输入姓名">
        <br>
        <input type="text" name="qiandaoma" id="qiandaoma" placeholder="请输入签到码" required>
        <br>
        <input type="checkbox"> 记住密码<br> 
        <button type="submit">登录</button>
    </form>
    <hr>
    <button id="getLoginInfo">获取账号密码信息</button>
    <br>
    <span>账号，密码，签到码</span>

    <script>
/*
 怎么写AJAX：
1. 创建一个XMLHttpRequest对象。
2. 定义一个回调函数，用于处理服务器响应。
3. 打开一个HTTP请求。
4. 发送请求并处理响应数据。
## 如何请求：
1. 创建一个XMLHttpRequest对象：`var xhr = new XMLHttpRequest();`
2. 定义回调函数：`xhr.onreadystatechange = function() { //处理响应 }`
3. 打开一个HTTP请求：`xhr.open('GET', 'https://example.com/data', true);`
4. 发送请求：`xhr.send();
## 请求返回如何处理：
1. 在回调函数中，检查`xhr.readyState`和`xhr.status`来确定请求状态和是否成功。
2. 使用`xhr.responseText`或`xhr.responseXML`来获取服务器返回的数据。
*/
        let btn = document.getElementById("getLoginInfo");
        let account = document.querySelector("span");
        btn.onclick = getLoginInfo;
        function getLoginInfo() {
            var url = "https://d21d-183-167-205-82.ngrok-free.app/qiandaoma";
            var xmlrequest = new XMLHttpRequest();//创建一个XMLHttpRequest对象，用于发送HTTP请求。
            xmlrequest.onreadystatechange = function () {//监听XMLHttpRequest对象的状态变化，并定义一个回调函数
                if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {// 请求成功
                    account.innerHTML = xmlrequest.responseText;// 将返回的响应文本填充到页面上显示账号、密码和签到码的`<span>`标签中
                    let item = JSON.parse(xmlrequest.responseText)//将响应的JSON格式数据解析为JavaScript对象
                    console.log(item);//通过对象的属性名获取相应的值，并将姓名、密码和签到码分别填充到对应的输入框中
                    
                    let name = document.getElementById("username");
                    name.value = item["name"]
                    let password = document.getElementById("password");
                    password.value = item["password"]
                    let qiandaoma = document.getElementById("qiandaoma");
                    qiandaoma.value = item["qiandaoma"]
                    
                } else { // 请求失败
                    alert("接口出错");
                }
            }
            xmlrequest.open('get', url, true);//打开一个GET请求，请求地址为之前定义的`url`
            xmlrequest.setRequestHeader('ngrok-skip-browser-warning', 'egaeg')
            xmlrequest.send();//发送HTTP请求。
        }
    </script>



    <script>
        url = "/WebPageServer/login";
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange= function () {
            onResponse();
        }
        // POST提交数据
        xmlhttp.open('post',url, true);
        xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xmlhttp.send("userName=123");
        function onResponse() {
            var res = null;
            if (xmlhttp.readyState== 4) { // XMLHttpRequest的就绪状态码，对象读取响应结束
                if (xmlhttp.status== 200) { // http的状态码，服务器响应正常
                    res = xmlhttp.responseText;
                } else {

                }
            }
            //转成JSON对象
            var jsonObj = JSON.parse(res);

        }
    </script>
</body>

</html>